/* components */
import { 
  SettingGPTViewHeader,
  SettingGPTViewContent,
  SettingGPTPromptWord
} from "@src/modules/setting/gpt/components";
import Tabs from "@src/modules/setting/gpt/views/intelligent-qa/tabs";
import ModulesInside from "@src/modules/setting/gpt/views/edit/module-inside";
import ModulesOutside from "@src/modules/setting/gpt/views/edit/module-outside";
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* hooks */
import { useSettingGPTRobotAppIntelligentQA, useSettingGPTRobotAppIntelligentQATab } from "@gpt/hooks";
/* models */
import { 
  SettingGPTRobotInsideModules,
  SettingGPTPromptWord as SettingGPTPromptWordModel
} from "@gpt/model";
/* vue */
import { defineComponent } from "vue";
/* scss */
import "@src/modules/setting/gpt/views/intelligent-qa/index.scss";
/* util */
import { stringify } from "@src/util/lang/object";
import { isEmpty, isFalsy } from "@src/util/type";
/* types */
import { SettingGPTPromptWordItem, SettingGPTRobotAppConfigType, SettingGPTRobotModuleConfigType } from "@gpt/types";

type SettingGPTPromptWordComponent = InstanceType<typeof SettingGPTPromptWord>

export default defineComponent({
  name: ComponentNameEnum.SettingGPTIntelligentQAView,
  props: {
    
  },
  setup(props, { emit }) {
    
    const {
      initialize,
      gptRobotApp,
      loading,
      robotId,
      robotAppId,
      allOutsideModules,
      onFetchGptRobotAppHandler,
      onUpdateRobotAppIntelligentQAModuleHandler,
      onUpdateIntelligentQAPromptWordHandler
    } = useSettingGPTRobotAppIntelligentQA()
    
    const {
      setActive, 
      active, 
      isAbilitySettingActive,
      isPromptWordActive
    } = useSettingGPTRobotAppIntelligentQATab()
    
    return {
      initialize,
      gptRobotApp,
      loading,
      robotId,
      robotAppId,
      allOutsideModules,
      setActive,
      active,
      isAbilitySettingActive,
      isPromptWordActive,
      onFetchGptRobotAppHandler,
      onUpdateIntelligentQAPromptWordHandler,
      onUpdateRobotAppIntelligentQAModuleHandler
    }
    
  },
  data() {
    return {
      wikiValue: [] as string[]
    }
  },
  computed: {
    attrs(): Record<string, any> {
      return {
        directives: [
          {
            name: 'loading',
            value: this.loading
          }
        ]
      }
    },
    title(): string {
      return '智能问答，高效节省答疑人力';
    },
    subTitle(): string {
      return '让智能助手为你在群内创建和训练问答机器人；再也不用反复回答 <br> 相似的业务问题，客服、答疑等场景均可适用。';
    },
    robotAppSetting(): SettingGPTRobotAppConfigType {
      return this.gptRobotApp.setting
    },
    promptWordList(): SettingGPTPromptWordItem[] {
      return this.robotAppSetting.promptWordList || []
    },
    insideModuleConfig(): SettingGPTRobotModuleConfigType {
      return this.robotAppSetting.insideModuleConfig
    },
    outsideModuleConfig(): SettingGPTRobotModuleConfigType {
      return this.robotAppSetting.outsideModuleConfig
    },
    contentClassNames(): Record<string, boolean> {
      return {
        'setting-gpt-intelligent-view-content-ability': this.isAbilitySettingActive,
        'setting-gpt-intelligent-view-content-preview': this.isPromptWordActive
      }
    },
    settingGPTPromptWordComponent(): SettingGPTPromptWordComponent {
      return this.$refs.SettingGPTPromptWord as SettingGPTPromptWordComponent
    }
  },
  watch: {
    
  },
  mounted() {
    this.initialize()
  },
  methods: {
    onChangeInsideModuleConfigHandler(value: SettingGPTRobotModuleConfigType) {
      this.gptRobotApp.setting.insideModuleConfig = value
    },
    onChangeOutsideModuleConfigHandler(value: SettingGPTRobotModuleConfigType) {
      this.gptRobotApp.setting.outsideModuleConfig = value
    },
    onUpdateRobotAppSettingHandlerImpl() {
      
      if (this.isAbilitySettingActive) {
        return this.onUpdateRobotAppSettingAbilityHandlerImpl()
      }
      
      if (this.isPromptWordActive) {
        return this.onUpdateRobotAppSettingPromptWordHandlerImpl()
      }
      
      throw new Error(`Invalid active: ${this.active}`)
      
    },
    onUpdateRobotAppSettingAbilityHandlerImpl() {
      
      const params = {
        robotAppId: this.gptRobotApp.id as unknown as string,
        robotId: this.robotId,
        insideModuleConfig: this.gptRobotApp.setting.insideModuleConfig,
        outsideModuleConfig: this.gptRobotApp.setting.outsideModuleConfig
      }
      
      this.onUpdateRobotAppIntelligentQAModuleHandler(params).then(isSuccess => {
        if (isSuccess) {
          this.onFetchGptRobotAppHandler()
          this.$message.success('保存成功')
        }
      })
      
    },
    async onUpdateRobotAppSettingPromptWordHandlerImpl() {
      
      const promptWordList = this.gptRobotApp.setting.promptWordList
      
      const settingGPTPromptWordComponent = this.$refs.SettingGPTPromptWord as SettingGPTPromptWordComponent
      const isValid = await settingGPTPromptWordComponent.validate()
      if (isFalsy(isValid)) {
        return
      }
      
      const params = {
        robotAppId: this.gptRobotApp.id as unknown as string,
        robotId: this.robotId,
        promptWordList
      }
      
      this.onUpdateIntelligentQAPromptWordHandler(params).then(isSuccess => {
        if (isSuccess) {
          this.onFetchGptRobotAppHandler()
          this.$message.success('保存成功')
        }
      })
      
    },
    onChangePromptWordHandler(value: SettingGPTPromptWordItem[]) {
      this.gptRobotApp.setting.promptWordList = value
    },
    onAddPromptWordHandler() {
      const promptWordList = [
        ...this.promptWordList,
        new SettingGPTPromptWordModel()
      ]
      this.onChangePromptWordHandler(promptWordList)
    },
    renderAbilitySettingTab() {
      
      if (isFalsy(this.isAbilitySettingActive)) {
        return
      }
      
      return (
        <div>
          { this.renderModuleInside() }
          { this.renderModuleOutside() }
        </div>
      )
    },
    renderModuleInside() {
      return (
        <ModulesInside
          allModules={SettingGPTRobotInsideModules}
          value={this.insideModuleConfig}
          wikiValue={this.wikiValue}
          robotAppId={this.robotAppId}
          onInput={this.onChangeInsideModuleConfigHandler}
        >
        </ModulesInside>
      )
    },
    renderModuleOutside() {
      return (
        <ModulesOutside
          allModules={this.allOutsideModules}
          value={this.outsideModuleConfig}
          onInput={this.onChangeOutsideModuleConfigHandler}
        >
        </ModulesOutside>
      )
    },
    renderPromptWordTab() {
      
      if (isFalsy(this.isPromptWordActive)) {
        return
      }
      
      return (
        <div>
          <SettingGPTPromptWord
            ref="SettingGPTPromptWord"
            appName="智能问答"
            value={this.promptWordList}
            onChange={this.onChangePromptWordHandler}
            onAdd={this.onAddPromptWordHandler}
          >
          </SettingGPTPromptWord>
        </div>
      )
    },
    renderSaveButton() {
      return (
        <el-button
          type="primary"
          size="medium"
          onClick={this.onUpdateRobotAppSettingHandlerImpl}
        >
          保存
        </el-button>
      )
    },
    renderFooter() {
      return (
        <div class="setting-gpt-intelligent-view__footer">
          <el-button
            type="primary"
            size="medium"
            onClick={this.onUpdateRobotAppSettingHandlerImpl}
          >
            保存
          </el-button>
        </div>
      )
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTIntelligentQAView} {...this.attrs}>
        
        <SettingGPTViewHeader
          title={this.title}
          subTitle={this.subTitle}
        >
        </SettingGPTViewHeader>
        
        <SettingGPTViewContent
          class={this.contentClassNames}
        >
          
          <div class="setting-gpt-intelligent-view-tab">
            
            <Tabs
              value={this.active}
              onInput={this.setActive}
            >
            </Tabs>
            
            { this.renderSaveButton() }
            
          </div>
          
          <div class="setting-gpt-intelligent-view-tab-content">
            { this.renderAbilitySettingTab() }
            { this.renderPromptWordTab() }
          </div>
          
        </SettingGPTViewContent>
        
      </div>
    )
  }
});